<template>
	<view class="storefront">
		<view class="dpxq">
			<view class="vis" style="height: 50px;">
				<view>订单号</view>
				<view>
					<view>{{userinfo.orderNumber}}</view>
				</view>
			</view>
			<view class="vis" style="height: 50px;">
				<view>订单状态</view>
				<view>
					<view v-if="userinfo.orderStatus == 8">待审核</view>
					<view v-if="userinfo.orderStatus == 1">待支付</view>
					<view v-if="userinfo.orderStatus == 2">已支付</view>
				</view>
			</view>
			<view class="vis" style="height: 50px;">
				<view>买家</view>
				<view>
					<view>{{userinfo.contacts}}</view>
				</view>
			</view>
			<view class="vis" style="height: 50px;">
				<view>联系方式</view>
				<view>
					<view>{{userinfo.telephone}}</view>
				</view>
			</view>
			<view class="vis" style="height: 50px;">
				<view>下单时间</view>
				<view>
					<view>{{userinfo.submissionTime}}</view>
				</view>
			</view>
			<view class="vis" style="height: 50px;">
				<view>用车时间</view>
				<view>
					<view>{{userinfo.takesTime}}</view>
				</view>
			</view>
			<view class="dzxx">
				<view>出发地</view>
				<view>{{userinfo.startAddress}}</view>
			</view>
			<view class="dzxx">
				<view>目的地</view>
				<view>{{userinfo.destination}}</view>
			</view>
			<view class="vis" style="height: 50px;">
				<view>距离</view>
				<view>
					<view>约{{userinfo.kilometers}}公里</view>
				</view>
			</view>
			<view class="vis" style="height: 50px;">
				<view>合计</view>
				<view>
					<view>约{{userinfo.paymentAmount}}元</view>
				</view>
			</view>
		</view>
		<view class="commodity">
			<image mode="widthFix"  src="http://cdn.jxsr.com/cls.png" />
			<view class="shops">
				<view class="clxx">
					<view>
						<!-- <span class="sp1">{{clData.licensePlate}}</span> -->
						<span class="sp1">{{vehicleInformation.vehicleInformationName}}</span>
						<!-- <span>{{clData.vehicleColor}}</span> -->
					</view>
					<view>
						<span>车厢长宽高：</span>
						<span>{{vehicleInformation.lasting}}*{{vehicleInformation.wide}}*{{vehicleInformation.high}}米</span>
					</view>
					<!-- <view>
						<span>{{clData.contacts}}</span>
						<span class="sp2">{{clData.telephone}}</span>
					</view> -->
					<view>
						<view>起¥{{vehicleInformation.vehiclePrice}}/{{vehicleInformation.startingKilometers}}km 超¥{{vehicleInformation.markUp}}/公里</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 支付方式 -->
		<view class="pays" style="margin-bottom: 100px;" v-if="userinfo.orderStatus == 1">
			<view class="titles">支付方式</view>
			<view class="zffs" style="height: 80px;">
				<view class="mode" style="-webkit-flex: 1;flex: 1;">
					<view @click="pay(0)">
						<image style="width: 63px;height: 20px;" mode="widthFix" src="http://cdn.jxsr.com/wxzf.png" />
					</view>
					<!-- <view @click="pay(1)">
						<image style="width: 67px;height: 20px;" mode="widthFix" src="http://cdn.jxsr.com/zfbzf.png" />
					</view >
					<view @click="pay(2)">
						<image style="width: 82px;height: 20px;" mode="widthFix" src="http://cdn.jxsr.com/ylzf.png" />
					</view> -->
					<view @click="pay(3)">
						<image style="width: 17px;height: 20px;" mode="widthFix" src="http://cdn.jxsr.com/ye.png" />
						余额支付
					</view >
				</view>
				<uni-data-checkbox  style="width: 20px;" selectedColor="#1E9B5E" v-model="radio" :localdata="sex" @change="checkboxChange"></uni-data-checkbox>
			</view>
		</view>
		<!-- 立即支付 -->
		<view class="buts" v-if="userinfo.orderStatus == 1">
			<view class="service" @click="$noMultipleClicks(rob)">
				<span class="sp2">立即支付</span>
			</view>
		</view>
	</view>
</template>

<script>
	import { wlddfindById,wxPayLogistics,balancePayLogistics,resetLogisticsOrderNum,xcxWxPayLogistics } from '@/utils/api.js';
	export default {
		data() {
			return {
				noClick:true,
				id:0,
				userinfo:{orderStatus:8},
				vehicleInformation:{},
				
				buls:true,
				
				// 支付方式
				radio:0,
				sex: [{
					value: 0// 微信
				},
				// {
				// 	value: 1// 支付宝
				// }, {
				// 	value: 2// 银联
				// },
				{
					value: 3// 余额
				}],
			}
		},
		onLoad(e){
			// console.log(e);
			if(e.id){
				this.id=e.id
				uni.showLoading({
					mask:true,
					title: '加载中...'
				})
				this.spddxxxx()
			}
			
			
			// #ifdef APP-PLUS
			uni.getProvider({
			    service: "payment",
			    success: (e) => {
			        // console.log("payment success:" + JSON.stringify(e));
			        let providerList = [];
			        e.provider.map((value) => {
			            switch (value) {
			                case 'alipay':
			                    providerList.push({
			                        name: '支付宝',
			                        id: value,
			                        loading: false
			                    });
			                    break;
			                case 'wxpay':
			                    providerList.push({
			                        name: '微信',
			                        id: value,
			                        loading: false
			                    });
			                    break;
			                default:
			                    break;
			            }
			        })
			        this.providerList = providerList;
					// console.log(this.providerList);
			    },
			    fail: (e) => {
			        console.log("获取支付通道失败：", e);
			    }
			});
			// #endif
		},
		methods: {
			// 获取订单详情
			spddxxxx(){
				// 获取订单详情
				wlddfindById({
					id:this.id
				}).then((res) => {
					uni.hideLoading();
				    if (res.code === 200) {
				      // console.log(res);
					  this.userinfo=res.data
					  this.vehicleInformation=res.data.vehicleInformation
					} else {
				      uni.showToast({title:"请求错误", position: 'bottom'})
				    }
				}).catch((err) => {
					uni.hideLoading();
					uni.showToast({title:'网络繁忙', position: 'bottom'})
				});
			},
			// 支付选择
			pay(val){
				this.radio=val
				this.buls=true
				// console.log(this.radio);
				if(val == 1 || val == 2){
					uni.showToast({title:"暂未开通", position: 'bottom',icon:'none'})
					this.buls=false
				}
			},
			// 点击支付方式圆点
			checkboxChange(e){
				this.radio=e.detail.value
				this.buls=true
				if(e.detail.value == 1 || e.detail.value == 2){
					uni.showToast({title:"暂未开通", position: 'bottom',icon:'none'})
					this.buls=false
				}
			},
			// 提交订单方法
			rob(){
				// console.log(objs);
				let _this=this
				// uni.showModal({
				// 	content: "您确定要支付吗？",
				// 	confirmText: "确定",
				// 	cancelText: "取消",
				// 	success: function (res) {
				// 		if (res.confirm) {
				// 			// _this.noClick=false
				// 			// console.log('用户点击确定');
							uni.showLoading({
								mask:true
							})
							if(_this.radio == 0){
								// #ifdef MP-WEIXIN
								_this.wxPayLogistics(_this.userinfo)
								// #endif
							}else if(_this.radio == 3){
								_this.balancePayLogistics(_this.userinfo)
							}else{
								uni.showToast({title:"暂未开通", position: 'bottom',icon:'none'})
							}
															  
							
				// 		} else if (res.cancel) {
				// 			// console.log('用户点击取消');
				// 		}
				// 	}
				// })
								
			},
			
			// 微信支付
			wxPayLogistics(orderInfo){
				// 微信支付
				xcxWxPayLogistics({
					orderNumber:orderInfo.orderNumber
				}).then((res) => {
				    if (res.code === 200) {
						this.requestPayment(res.data,"wxpay")
				    } else {
				      uni.showToast({title:res.message, position: 'bottom'})
				    }
				}).catch((err) => {
					uni.showToast({title:'网络繁忙', position: 'bottom'})
				});
			},
			// 支付
			requestPayment(e,zflx) {
				let _this=this
			    let orderInfo = e;
			    // console.log("得到订单信息", orderInfo,zflx);
			   //  uni.requestPayment({
			   //      provider: zflx,
			   //      orderInfo: orderInfo,
			   //      success: (e) => {
			   //          // console.log("success", e);
			   //          uni.showToast({
			   //              title: "支付成功!"
			   //          })
			   //      },
			   //      fail: (e) => {
			   //          console.log("fail", e);
			   //          uni.showModal({
			   //              content: "支付失败",
			   //              showCancel: false
			   //          })
						// _this.resetLogisticsOrderNum()
			   //      },
			   //      complete: () => {
			   //          setTimeout(() => {
			   //          	uni.hideLoading()
			   //          	uni.navigateBack({delta: 1})
			   //          }, 1000);
			   //      }
			   //  })
				
				
				
				uni.requestPayment({
				    provider: 'wxpay',
				    timeStamp: orderInfo.timeStamp,
				    nonceStr: orderInfo.nonceStr,
				    package: orderInfo.package,
				    signType: 'MD5',
				    paySign: orderInfo.paySign,
					success: function (res) {
						// console.log(res);
						uni.hideLoading()
						uni.showToast({
						    title: "支付成功!"
						})
					},
					fail: function (err) {
						// console.log(err);
						uni.hideLoading()
						uni.showModal({
						    content: "支付失败",
						    showCancel: false
						})
						_this.resetLogisticsOrderNum()
					},
				    complete: () => {
				        setTimeout(() => {
				        	uni.hideLoading()
				        	uni.navigateBack({delta: 1})
				        }, 1000);
				    }
				});
			},
			// 余额支付
			balancePayLogistics(orderInfo){
				// 余额支付
				balancePayLogistics({
					orderNumber:orderInfo.orderNumber
				}).then((res) => {
				    if (res.code === 200) {
						// console.log(res);
						uni.showToast({
						    title: "支付成功!"
						})
						setTimeout(() => {
							uni.hideLoading()
							uni.navigateBack({delta: 1})
						}, 1000);
				    } else {
				      uni.showToast({title:res.message, position: 'bottom'})
				    }
				}).catch((err) => {
					uni.showToast({title:'网络繁忙', position: 'bottom'})
				});
			},
			// 更新订单号
			resetLogisticsOrderNum(){
				let _this=this
				resetLogisticsOrderNum({
					id:_this.userinfo.id
				}).then((res) => {
					uni.hideLoading()
					// _this.noClick=true
				    if (res.code === 200) {
						// console.log(res);
						// uni.showToast({
						//     title: "更新成功!"
						// })
						setTimeout(() => {
							// uni.hideLoading()
							// uni.navigateBack({delta: 1})
							uni.showLoading({
								mask:true,
								title: '加载中...'
							})
							_this.spddxxxx()
						}, 1000);
				    } else {
				      uni.showToast({title:res.message, position: 'bottom',icon:'none'})
				    }
				}).catch((err) => {
					uni.hideLoading()
					// _this.noClick=true
					uni.showToast({title:'网络繁忙', position: 'bottom',icon:'none'})
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.storefront{
		padding: 10px;
		.dpxq{
			background: #FFFFFF;
			border-radius: 10px;
			padding: 0 10px;
			margin-bottom: 10px;
			.vis{
				border-bottom: 1px solid #D8D8D8;
				font-size: 18px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: $mainText;
				line-height: 22px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				view:nth-child(2){
					font-weight: 400;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
			.vis:last-child{
				border-bottom: none;
				// display: flex;
				// flex-direction: column;
				// align-items: flex-start;
				// justify-content: flex-start;
				// view:nth-child(1){
				// 	height: 50px;
				// 	display: flex;
				// 	align-items: center;
				// 	justify-content: space-between;
				// }
				// view:nth-child(2){
				// 	padding: 0 10px;
				// 	height: 40px;
				// 	font-weight: 400;
				// 	display: flex;
				// 	align-items: center;
				// 	justify-content: space-between;
				// }
			}
			
			.dzxx{
				border-bottom: 1px solid #D8D8D8;
				font-size: 18px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: $mainText;
				padding: 10px 0;
				// line-height: 22px;
				
				// display: flex;
				// align-items: center;
				// justify-content: space-between;
				// view:nth-child(1){
				// 	font-weight: 400;
				// 	height: 40px;
				// }
				view:nth-child(2){
					margin-top: 10px;
					font-weight: 400;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
		}
		.commodity{
			padding: 10px;
			background: #FFFFFF;
			border-radius: 10px;
			margin-bottom: 10px;
			display: flex;
			align-items: center;
			image{
				width: 100px;
				height: 100px;
				margin: 10px;
				border-radius: 8px;
			}
			.shops{
				-webkit-flex: 1;
				flex: 1;
				height: 100px;
				padding-right: 10px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.clxx{
					height: 64px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					view{
						font-size: 14px;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: $text;
						line-height: 17px;
						.sp1{
							font-size: 18px;
							font-weight: 600;
							color: $mainText;
							line-height: 22px;
						}
						.sp2{
							margin: 0 6px;
						}
					}
					
				}
			}
			
		}
		.pays{
			padding: 0 10px 10px 10px;
			margin-bottom: 100px;
			background: #FFFFFF;
			border-radius: 10px;
			.titles{
				font-size: 18px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: $mainText;
				line-height: 50px;
			}
			.zffs{
				// height: 150px;
				display: flex;
				justify-content: space-between;
				.mode{
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					view{
						display: flex;
						align-items: center;
						image{
							margin-right: 10px;
						}
					}
				}
				::v-deep .uni-data-checklist{
					flex: 0;
					height: 100%;
					.checklist-group{
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						.checklist-box{
							margin: 0;
						}
					}
				}
			}
		}
		.buts{
			width: 100%;
			height: 110rpx;
			position: fixed;
			bottom: 50rpx;
			.service{
				width: 95%;
				height: 110rpx;
				background: linear-gradient(232deg, #B9D378 0%, #1B9A5D 100%);
				box-shadow: 0px 0px 10px 0px rgba(33, 156, 94, 0.5);
				border-radius: 56rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				.sp2{
					font-size: 36rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 110rpx;
					padding: 0 10rpx;
				}
			}
		}
	}
</style>
